<template>
  <div>
    御剑乘风来,除魔天地间!
    <span class="iconfont icon-weixin"></span>
    <chacao :list="list">
      <template v-slot:look="{res}">
        <button @click="xian(res)">编辑</button>
        <button @click="del(res.id)">删除</button>
      </template>
    </chacao>
    <!-- <load :flag.sync="flag" :width="width" :height="height" >
    </load>-->
    <load :flag.sync="flag" height="25%" title="改变数据" width="25%">
      <form>
        姓名:
        <input type="text" v-model="formData.name"/>
        <br />年龄:
        <input type="text" v-model="formData.age"/>
      </form>
      <div>
      <button @click="xiao">取消</button>
      <button @click="submit">确认</button>
    </div>
    </load>
    <!-- <chacao :list="list">
      <template slot="look" slot-scope="{res}">
        <button>查看</button>
        <button @click="del(res.id)">删除</button>
      </template>
    </chacao>-->
  </div>
</template>
<script>
import chacao from './cha/chacao.vue';
import load from './chaload/load...vue';
export default {
  name: '',
  components: {
    chacao,
    load
  },
  data () {
    return {
      list: [
        {
          id: 1,
          name: '张小亮',
          age: 18
        }, {
          id: 2,
          name: '龚小狗',
          age: 18
        }, {
          id: 3,
          name: '何大6',
          age: 18
        }
      ],
      flag: false,
      width: '50%',
      height: '50%',
      formData:{
        name:'',
        age:''
      }
    }
   }, 
   //beforeCreate () {
  //   console.log(beforeCreate === '父');
  // },
  // created () {
  // },
  // beforeMount () {
  // },
  // mounted () {
  // },
  // beforeUpdate () {
  // },
  // updated () {
  // },
  // beforeDestroy () {
  // },
  // destroyed () {
  // },
  computed: {
  },
  methods: {
    del (id) {
      console.log(id);
      this.list = this.list.filter(ele => ele.id != id)
    },
    xian (res) {
      this.flag = true
      this.formData = JSON.parse(JSON.stringify(res))
    },
    xiao () {
      console.log(1111)
      this.flag = false
    },
    submit(){
      console.log(this.formData);
      const obj = this.list.find(ele=>ele.id === this.formData.id)
      obj.name = this.formData.name
      obj.age = this.formData.age
      this.flag = false
    }
  }
}
</script>
<style lang='less'  scoped>
span {
  color: yellowgreen;
}
</style>
